ajax({
    method: 'GET', //请求方法
    url: 'http://www.xiongmaoyouxuan.com/api/tab/1', //url地址
    success: function (data) {
        console.log(data);
        if (data.code == 200) {
            //处理成功数据 data
            let list = data.data.items.list
            let num = list.length % 4
            if (num != 0) {
                list.splice(list.length - num, num)
            }
            productList(list)
            let banner = data.data.banners
            console.log(banner);
            bannerShow(banner)
        }
    }
})
//渲染页面
let ulObj = document.querySelector('ul[class="product-list-li"]')

function productList(list) {
    list.forEach(function (v, i) {
        let str = `
    <div class="img"><img src=${v.image} alt=""></div>
    <div class="describe">${v.title}</div>
    <div class="titie">
        <div class="titie-l">淘宝</div>
        <div class="titie-r">包邮</div>
    </div>
    <div class="price">
        <div class="price-l">
            <span class="a">￥</span>
            <span class="b">${v.price}</span>
    
            <span class="d">${v.saleNum}已买</span>
        </div>
        <div class="price-r">
          ${v.couponValue}
        </div>
    </div>
    `
        let objLi = document.createElement('li')
        let id = v.id
        objLi.innerHTML = str
        ulObj.appendChild(objLi)
        //点击商品跳转商品详情页
        details(objLi, id)

    })
}
//点击商品跳转商品详情页
function details(a, b) {
    a.onclick = function () {
        location.href = `../pages/details.html?id=${b}`
    }
}
//轮播图
function bannerShow(banner) {
    let wrapperObj = document.querySelector('.swiper-wrapper')
    let str = ''
    if (banner.length == 0) {
        str = `
      <div class="swiper-slide"><img src="../images/1.jpg" alt="" width="600px" height="300px"></div>
`
        wrapperObj.innerHTML = str
    } else {
        let str = ''
        banner.forEach(v => {
            str += ` <div class="swiper-slide">
      <img src=${v.imageUrl} width="600px" height="300px">
      </div>`
        })
        wrapperObj.innerHTML = str
    }
    new Swiper('.swiper-container', {
        loop: true, // 循环模式选项
        autoplay: true,
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },

    })
}

function clickProductShow(num) {
    ajax({
        method: 'GET', //请求方法
        url: 'http://www.xiongmaoyouxuan.com/api/tab/1', //url地址
        data: {
            start: num * 20
        },

        success: function (data) {
            if (data.code == 200) {
                let list = data.data.items.list
                productList(list)
            }
        }
    })
}
let moreObj = document.querySelector('.click')
let num = 0
moreObj.onclick = function () {
    clickProductShow(++num)
}
let nine=document.querySelector('.menu .a')

let largeVolume=document.querySelector('.menu .b')
let cool=document.querySelector('.menu .c')
nine.onclick=function(){
    location.href="../pages/nine.html"
}
largeVolume.onclick=function(){
    location.href="../pages/largeVolume.html"
}
cool.onclick=function(){
    location.href="../pages/cool.html"
}
//返回顶部
function abc(){
    
    let backTop=document.querySelector('.back-top')
    window.onscroll=function(){
        let top=document.documentElement.scrollTop
       if(top>200){
        backTop.style.display = 'block'
        backTop.onclick = function () {
          let timer = setInterval(() => {
            if (document.documentElement.scrollTop == 0) {
              clearInterval(timer)
            } else {
              document.documentElement.scrollTop -= 20
            }
          }, 10);
        }
      }else if(top<200){
        backTop.style.display = 'none'
      }
    }

    }
    

 
 
 abc()